<template>
	<view class="qh-page-view flex-column" :style="skin">
		<qh-navbar v-if="showNavbar" :fixed="fixed" :boxShadow="boxShadow" :autoBack="autoBack" :showBack="showBack" :title="title" :color="color"
			:titleColor="titleColor"  :centerStatus="centerStatus"  :iconColor="iconColor" :bgColor="bgColor" @back="backPreview" :position="position"  :bgImageUrl="bgImageUrl">
			<template slot="nav-title">
				<slot name="page-nav-title"></slot>
			</template>
		</qh-navbar>
		<view class="qh-page-view-content flex-column">
			<slot></slot>
		</view>
		<view v-if="pageLoading" class="qh-page-view-loading flex-cn-cn">
			<qh-loading value></qh-loading>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'qh-page-view',
		props: {
			centerStatus: {
				type: Boolean,
				default: false,
			},
			customStyle: {
				type: [String, Object],
				default () {
					return {}
				}
			},
			showNavbar: {
				type: Boolean,
				default: true,
			},
			fixed: {
				type: Boolean,
				default: false,
			},
			autoBack: {
				type: Boolean,
				default: true,
			},
			showBack: {
				type: Boolean,
				default: true,
			},
			title: {
				type: String,
				default: '',
			},
			position: {
				type: String,
				// #ifdef MP-ALIPAY
				default: 'right',
				// #endif
				// #ifdef MP-WEIXIN
				default: '',
				// #endif
			}, //标题位置，默认中间对齐，可选“left”左边
			color: {
				type: String,
				default: '#fff',
			},
			titleColor: {
				type: String,
				default: '',
			},
			iconColor: {
				type: String,
				default: '',
			},
			bgColor: {
				type: String,
				default: '#FFFFFF'
			},
			boxShadow: {
				type: Boolean,
				default: false,
			},
			loading: {
				type: Boolean,
				default: false,
			},
			bgImageUrl: {
				type: String,
				default: ''
			},
		},
		emits: ['back'],
		computed: {
			skin() {
				return '--popup-content-bottom:0;' + this.$store.skin + this.$joinStyle(this.customStyle)
			},
			pageLoading() {
				return this.loading || this.$store.pageLoadingState;
			},
		},
		methods: {
			backPreview() {
				this.$emit('back');
			},
		},
		created() {
			uni.$emit('hideLoading');
			// #ifdef MP-ALIPAY
			my.hideBackHome();
			// #endif
		}
	}
</script>

<style lang="scss">
	.qh-page-view {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
		// position: fixed;
		// top: 0;
		// left: 0;

		.qh-page-view-content {
			flex: 1;
			width: 100%;
			overflow-y: auto;
			position: relative;
			background-color: #F2F3F5;
		}

		.qh-page-view-loading {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			z-index: 1000000000;
		}
	}
</style>
